<template>
    <!-- 组件结构 -->
    <div class="demo">
        <h2>学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
        <button @click="showX">点我输出x</button>
    </div>
</template>
<script>
    // 组件交互相关代码（数据、方法等等）
    //组件暴露的三种方式：
        //默认导出(export default name)、命名导出(export const name ={})、混合导出(export{name})

    // const school = Vue.extend({
    //     data(){
    //         return {
    //             name: '北极星',
    //             address: '青岛'
    //         }
    //     },
    //     methods:{
    //         showX(){
    //             console.log(this)
    //             console.log(this.x)
    //         }
    //     }
    // })
    // export default school
    //简写形式
    export default {
        name: 'School',
        data(){
            return {
                name: '北极星',
                address: '青岛'
            }
        },
        methods:{
            showX(){
                console.log(this)
                console.log(this.x)
            }
        }
    }
</script>

<style>
    /* 组件样式 */
    .demo{
        background-color: orange;
    }
</style> 